<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="./../template/receptionTemplate.xhtml">
	<ui:define name="content">
		<h:form>
			<h:panelGrid columns="2" width="100%">
				<h:panelGrid width="60%" style="vertical-align: top;">
					<h:inputHidden id="id"
						value="#{receptionController.tokenDetailsDTO.id}" />

					<p:outputLabel value="Name: " for="name" />
					<h:inputText id="name"
						value="#{receptionController.tokenDetailsDTO.name}"
						required="true" requiredMessage="Field cannot be empty!"
						validatorMessage="Allowed value length is Min: 3 and Max 20.">
						<f:validateLength for="name" minimum="2" maximum="20" />
					</h:inputText>

					<p:outputLabel value="Mobile: " for="mobile" />
					<h:inputText id="mobile"
						value="#{receptionController.tokenDetailsDTO.mobileNo}"
						required="true">
					</h:inputText>

					<p:outputLabel value="Destination: " for="destination" />
					<h:selectOneMenu id="destination"
						value="#{receptionController.tokenDetailsDTO.destinationId}">
						<f:selectItems value="#{receptionController.destinationList}"
							var="destination" itemLabel="#{destination.name}"
							itemValue="#{destination.id}" />
					</h:selectOneMenu>

					<h:outputText value="" />
					<p:commandButton value="Save"
						action="#{receptionController.save}" ajax="true" update="@form" />
				</h:panelGrid>
				<h:panelGrid width="100%">
					<h:panelGrid columns="5" cellspacing="1" cellpadding="5" 
								 width="100%" 
								 styleClass="FORM_HEADER"
								 style="text-align:right;">
							<h:outputLabel value="Date: " for="appointmentDate" />
							<p:calendar id="appointmentDate"
											value="#{receptionController.appointmentDate}"
											pattern="yyyy-MM-dd" size="2"
											required="true" requiredMessage="Please select Appointment Date."/>
		
							<h:outputLabel value="Search Key: " for="searchKey"/>
							<h:inputText id="searchKey"
								value="#{receptionController.searchKey}" size="4"/>
								
							<p:commandButton value="Search"
								actionListener="#{receptionController.search}" ajax="true"
								update="@form"/>
					</h:panelGrid>
					<h:dataTable id="tokenTable"
						value="#{receptionController.tokenList}" var="token"
						styleClass="TABLE_BASIC_COMPOSITION" headerClass="TABLE_HEADER"
						rowClasses="ODD_ROW, EVEN_ROW" cellpadding="8" width="100%">
						<h:column>
							<f:facet name="header">Token No.</f:facet>
							<h:outputText value="#{token.tokenNo}" />
						</h:column>
						<h:column>
							<f:facet name="header">Name</f:facet>
							<h:outputText value="#{token.name}" />
						</h:column>
						<h:column>
							<f:facet name="header">Mobile No.</f:facet>
							<h:outputText value="#{token.mobileNo}" />
						</h:column>
						<h:column>
							<f:facet name="header">Destination</f:facet>
							<h:outputText value="#{token.destinationName}" />
						</h:column>
						<h:column>
							<f:facet name="header">Status</f:facet>
							<h:outputText value="#{token.tokenStatus}" />
						</h:column>
					</h:dataTable>
				</h:panelGrid>
			</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>
</html>